<template>
  <div class="list">
    <div
    class="item"
    v-for="item of letters"
    :key= "item"
    :ref= "item"
    @click="handleLetterClick"
    @touchstart="handleTouchStart"
    @touchmove="handleTouchMove"
    @touchend="handleTouchEnd"
    >{{item}}</div>
  </div>
</template>

<script>
//  flex布局中
//  flex-direction: column代表改变主轴方向row是横 column是竖的 ,还有 row-resver ...
//  justify-content: center  代表在主轴的方向上如何排列
//  当俩个组合在一起可以让它们竖直居中
export default {
  name: 'CityScroll',
  props: {
    cities: Object
  },
  data () {
    return {
      touchStatus: false,
      touchs: '',
      StartY: 0,
      timer: null
    }
  },
  updated () {
    this.StartY = this.$refs['A'][0].offsetTop
  },
  methods: {
    handleLetterClick (e) {
      this.$emit('change', e.target.innerText)
    },
    handleTouchStart () {
      this.touchStatus = true
    },
    handleTouchMove (e) {
      if (this.touchStatus) {
        //  const StartY = this.$refs['A'][0].offsetTop 优化
        if (this.timer) {
          clearTimeout(this.timer)
        }
        this.timer = setTimeout(() => {
          const touchY = e.touches[0].clientY - 91
          const index = Math.floor((touchY - this.StartY) / 20)
          if (index >= 0 && index < this.letters.length) {
            this.$emit('change', this.letters[index])
          }
        }, 16)
      }
    },
    handleTouchEnd () {
      this.touchStatus = false
    }
  },
  computed: {
    letters () {
      const letters = []
      for (let i in this.cities) {
        letters.push(i)
      }
      return letters
    }
  }
}
//	触碰改变List的思路和细节：
/*
1.标签中的@touchstart /@touchmove/@touchend分别代表着触碰开始，移动和结束
2.设置的方法写在methods中，其中为了保证在触碰的时候才有效果，所以需要一个开关变量也就是这里的touchStatus；
3.设置了开关变量要注意它必须存在所以需要在data中声明这个值；
4.为了更好的获取数据cities中的字母，我们使用computed：计算属性，调用的时候不用括号（方便）返回了letters；
5.这时候就可以更改标签中的值，简化cities数据；
6.在之前设置开关变量之后放在touchStart和touchEnd的方法中；
7.Move中需要获得边栏中第一个字母A到边框的距离，使用offsetTop获得StartY
8.使用function（e）{e.touches[0].clientY}来获取点击地方到页面顶部的距离（可以consolelog查看function中的e）
9. touchY = e.touches[0].clientY - 导航栏的高度
10.获取元素下标就用Math.floor((touchY-StartY)/20)  (除20是因为每个字母元素高20px)
11.由于$emit change 可以让父组件City获得数据并且由List跳转所以在这里就$emit change；但是要注意index的范围

接下来是组件的优化
1.放一个生命周期钩子updated（页面更新并渲染后执行）把const StartY = this.$refs['A'][0].offsetTop放入
（一开始父组件City中数据cities是空的所以没有渲染，接下来Ajax获取数据后开始渲染到Scroll中，当数据发生改变并渲染完成后才会触发
updated生命周期钩子）
2.在触碰的时候会方法Move会进行大量的运算，所以可以设置一个setTimeout函数来限制相同index时计算的次数。具体看上面,也就是当
计算量很大的时候就使用这个节流方法！
*/
</script>

<style lang="stylus" scoped>
@import '~styles/varibles.styl'
	.list
		display: flex
		position: absolute
		font-size: .30rem
		top: 2rem
		bottom:0
		right: .1rem
		width: .4rem
		flex-direction: column
		justify-content: center
		.item
			line-height: .4rem
			text-align: center
			color: $bgColor
</style>
